<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { addRoutesByRole } from '../router'

const router = useRouter()
const selectedRole = ref('user')

const roles = [
  { value: 'admin', label: '管理员' },
  { value: 'user', label: '普通用户' }
]

function handleLogin() {
  // 模拟登录过程
  sessionStorage.setItem('isLoggedIn', 'true')
  sessionStorage.setItem('userRole', selectedRole.value)
  
  // 根据角色添加路由
  addRoutesByRole(selectedRole.value)
  
  // 跳转到相应的首页
  if (selectedRole.value === 'admin') {
    router.push('/admin')
  } else {
    router.push('/user')
  }
}
</script>

<template>
  <div class="login-container">
    <h1>登录系统</h1>
    <div class="login-form">
      <div class="form-group">
        <label for="role">选择角色：</label>
        <select id="role" v-model="selectedRole">
          <option v-for="role in roles" :key="role.value" :value="role.value">
            {{ role.label }}
          </option>
        </select>
      </div>
      <button @click="handleLogin" class="login-btn">登录</button>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.login-form {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 320px;
}

.form-group {
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.login-btn {
  width: 100%;
  padding: 0.75rem;
  background-color: #42b883;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-btn:hover {
  background-color: #33a06f;
}
</style> 